<template>
  <view :style="colorStyle">

    <!-- #ifdef MP-WEIXIN -->
    <view class="fixed-lt w-full z-999 header_box" :style="{'padding-top': sysHeight + 'px'}">
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view class="fixed-lt w-full z-999 header_box bg--w111-fff">
    <!-- #endif -->
        <view class="h-80 px-20 flex-y-center">
          <!-- #ifndef MP-ALIPAY -->
          <text class="iconfont icon-ic_leftarrow fs-40 text--w111-333 mr-20" @click="goPage(3)"></text>
          <!-- #endif -->
          <!--  #ifdef  MP-WEIXIN -->
          <view class="bg--w111-f5f5f5 w-460 h-58 rd-30 bg--w111-fff flex-y-center px-32">
          <!--  #endif -->
          <!--  #ifndef  MP-WEIXIN -->
          <view class="bg--w111-f5f5f5 flex-1 h-58 rd-30 bg--w111-fff flex-y-center px-32">
          <!--  #endif -->
              <text class="iconfont icon-ic_search fs-24 text--w111-999"></text>
              <input v-model="keyword" confirm-type="search" @focus="searchFocus" @confirm="inputConfirm"
                     class="pl-18 flex-1 fs-24" placeholder="请输入商品名称" placeholder-class="text--w111-999" />
            </view>
          </view>
          <scroll-view class="tab-scroll" scroll-x="true">
            <view class="tab-box h-100 w-full px-32 fs-26"  v-show="!focus">
              <text :class="orderStatus === '' ? 'active' : ''" @click="statusClick('')">全部</text>
              <text :class="orderStatus === 0 ? 'active' : ''" @click="statusClick(0)">待审核</text>
              <text :class="orderStatus === 99 ? 'active' : ''" @click="statusClick(99)">交付中</text>
              <text :class="orderStatus === 3 ? 'active' : ''" @click="statusClick(3)">租用中</text>
              <text :class="orderStatus === 34 ? 'active' : ''" @click="statusClick(34)">已逾期</text>
              <text :class="orderStatus === 4 ? 'active' : ''" @click="statusClick(4)">已完成</text>
<!--              <text :class="orderStatus === 100 ? 'active' : ''" @click="statusClick(100)">待免押</text>-->
<!--              <text :class="orderStatus === 101 ? 'active' : ''" @click="statusClick(101)">待签约</text>-->
<!--              <text :class="orderStatus === 102 ? 'active' : ''" @click="statusClick(102)">签约中</text>-->
<!--              <text :class="orderStatus === 103 ? 'active' : ''" @click="statusClick(103)">待付款</text>-->
<!--              <text :class="orderStatus === 1 ? 'active' : ''" @click="statusClick(1)">待发货</text>-->
<!--              <view class="relative inline-block">-->
<!--                <text :class="orderStatus === 2 ? 'active' : ''" @click="statusClick(2)">待收货</text>-->
<!--                <uni-badge class="uni-badge-left-margin" v-if="orderData.received_count > 0" :text="orderData.received_count"></uni-badge>-->
<!--              </view>-->
<!--              <text :class="orderStatus === 3 ? 'active' : ''" @click="statusClick(3)">租用中</text>-->
<!--              <text :class="orderStatus === 4 ? 'active' : ''" @click="statusClick(4)">已完成</text>-->
<!--              <text :class="orderStatus === -1 ? 'active' : ''" @click="statusClick(-1)">退款中</text>-->
<!--              <text :class="orderStatus === -2 ? 'active' : ''" @click="statusClick(-2)">已退款</text>-->
<!--              <text :class="orderStatus === -3 ? 'active' : ''" @click="statusClick(-3)">退款</text>-->
            </view>
          </scroll-view>
    </view>

		<!-- #ifdef MP-WEIXIN -->
		 <view class="pt-32 pl-20 pr-20" :style="{'margin-top':marTop - 50 + 'px'}" v-show="focus">
		<!-- #endif -->

		<!-- #ifndef MP-WEIXIN -->
		<view class="pt-32 pl-20 pr-20" :style="{'margin-top':'200rpx'}" v-show="focus">
		<!-- #endif -->
      <view class="fs-28 text--w111-333 fw-500 lh-40rpx mb-24 acea-row row-between-wrapper">
        <view>历史搜索</view>
        <view class="iconfont icon-ic_delete text--w111-999 fs-28" @click="delHistory"></view>
      </view>
      <view class="flex flex-wrap">
        <text class="inline-block max-200 h-56 line1 lh-56rpx rd-28rpx  bg--w111-fff px-24 fs-24  text--w111-666 text-center mr-24 mb-16"
              v-for="(item,index) in historyList" :key="index" @click="goSearch(item)">{{item}}</text>
      </view>
    </view>

		<!-- #ifdef MP-WEIXIN -->
		<view  :style="{'margin-top':marTop + 'px'}" v-show="!focus">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view  :style="{'margin-top':'200rpx'}" v-show="!focus">
		<!-- #endif -->

          <view class="order_card bg--w111-fff"
                v-for="(item, index) in orderList" :key="index" @click="goOrderDetails(item)">
            <view class="card-top">
              <view class="l">
                <view>
                  订单号：{{item.order_id}}
                </view>
                <view class="mt-10">
                  下单时间：{{item._add_time}}
                </view>
              </view>
              <view class="fs-26 fw-bold">
                <view class="font-num">
                  <text>{{item._status._title}}</text>
                  <text v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</text>
                </view>
              </view>
            </view>
            <view class="mt-26" v-if="item.cartInfo.length && item.cartInfo.length == 1">
              <view class="flex justify-between" v-for="(items, i) in item.cartInfo" :key="i">
                <view class="flex">
                  <easy-loadimage
                      mode="widthFix"
                      :image-src="items.productInfo.image"
                      width="136rpx"
                      height="136rpx"
                      borderRadius="16rpx"></easy-loadimage>
                  <view class="ml-20">
                    <view class="w-346 fs-28 text--w111-333 lh-40rpx line2">
                      <secondHandTag :lease_type="item.productInfo.lease_type" :new_old="items.productInfo.new_old" :level="items.productInfo.level"></secondHandTag>
                      {{items.productInfo.store_name }}
                    </view>
                    <view class="w-346 fs-24 text--w111-999 lh-34rpx line1 mt-12">{{items.productInfo.attrInfo.suk}}</view>
                  </view>
                </view>
                <view>
                  <!-- <baseMoney v-if="items.productInfo.attrInfo" :money="items.productInfo.attrInfo.price"
                    symbolSize="20" integerSize="32" decimalSize="20" incolor="#333333" weight></baseMoney>
                  <baseMoney v-else :money="items.productInfo.price" symbolSize="20" integerSize="32"
                    decimalSize="20" incolor="#333333" weight></baseMoney> -->
<!--                  <baseMoney :money="item.pay_price" symbolSize="20" integerSize="32" decimalSize="20"-->
<!--                             incolor="#333333" weight></baseMoney>-->
<!--                  <view class="fs-24 text&#45;&#45;w111-999 lh-34rpx text-right">共{{item.total_num}}件</view>-->
                </view>
              </view>
            </view>
            <view class="mt-26 relative" v-if="item.cartInfo.length && item.cartInfo.length > 1">
              <scroll-view scroll-x="true" class="white-nowrap vertical-middle w-560" show-scrollbar="false">
                <view class="inline-block mr-16" v-for="(items,i) in item.cartInfo" :key="i">
                  <easy-loadimage
                      mode="widthFix"
                      :image-src="items.productInfo.image"
                      width="136rpx"
                      height="136rpx"
                      borderRadius="16rpx"></easy-loadimage>
                </view>
              </scroll-view>
              <view class="abs-rt h-136 flex-col flex-center">
<!--                <baseMoney :money="item.pay_price" symbolSize="20" integerSize="32" decimalSize="20"-->
<!--                           incolor="#333333" weight></baseMoney>-->
<!--                <view class="fs-24 text&#45;&#45;w111-999 lh-34rpx text-right">共{{item.total_num}}件</view>-->
              </view>
            </view>
<!--            <view class="order-tip">-->
<!--              <view>-->
<!--                <text class="text&#45;&#45;w111-333 font-num">{{item._status._title}}</text>-->
<!--                <text class="text&#45;&#45;w111-999 pl-20">{{item._status._msg}}</text>-->
<!--              </view>-->
<!--              <text class="iconfont icon-ic_rightarrow fs-24 text&#45;&#45;w111-999"></text>-->
<!--            </view>-->
            <!-- 完善资料 -->
<!--            <view class="data-tip" v-if="showCompleteData" @click.stop="goUserData">-->
<!--              <view class="l">完善身份信息可加速审核</view>-->
<!--              <view class="r">去完善</view>-->
<!--            </view>-->
            <view class="btn-box mt-32">
              <!-- <text class="fs-24 font-num" v-if="item._status._type == 0">{{item._status._msg}}</text> -->
<!--                <view class="btn w-154 h-56 rd-30rpx flex-center fs-24 border_ccc"-->
<!--                      v-if="item._status._type == 0 || item._status._type == 9"-->
<!--                      @tap.stop="showModalChange(item.order_id, 3)">取消订单</view>-->
<!--                <view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text&#45;&#45;w111-fff"-->
<!--                      v-if="item._status._type == 0" @click.stop="goPay(item.order_id)">立即支付</view>-->
<!--                <view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text&#45;&#45;w111-fff"-->
<!--                      v-else-if="item._status._type == 3" @click.stop="goOrderDetails(item)">立即评价</view>-->

                <view v-if="[3,31].includes(item._status._type) && item.order_lease.is_buyout==1" @click.stop="goBuyout(item)" class="btn-square rd-36rpx btn-ghost w-150">买断</view>
                  <view v-if="item._status._type==31" @click.stop="goReturn(item)" class="btn-square rd-36rpx btn-ghost w-150">归还</view>
                  <view v-if="item.back_id>0 && item.return_pay_postage>0" @click.stop="returnRecord(item)" class="btn-square rd-36rpx btn-ghost w-150">归还记录</view>
               <view @click.stop="goXuzu(item)" v-if="item.order_lease.is_relet==1 && item.order_lease.lease_status==5" class="btn-square rd-36rpx w-150">续租</view>
                <view @click.stop="depositPay(item)" v-if="item.deposit_record && item.deposit_record.status==0 && item.status < 2" class="btn-square rd-36rpx w-150">支付押金</view>
<!--                <view class="btn-square" v-if="item.paid" @click.stop="goInstallment(item)">租金账单</view>-->

                <view class="btn chat px-12 h-56 rd-30rpx flex-center fs-24 text--w111-fff bg-color"
                      @click.stop='toChat'>
                  <text class="iconfont icon-ic_customerservice"></text>
                </view>
                <!-- <view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff"
                  v-if="item._status._type == 4" @tap.stop="showModalChange(item.order_id, 2)">删除订单</view> -->

					<!-- 合同操作 -->
						<!-- 租赁宝 -->
					<!-- <view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff">租赁宝</view> -->
						<!-- E签宝 -->
					<!-- <view class="btn w-154 h-56 rd-30rpx flex-center fs-24 bg-color text--w111-fff">E签宝</view> -->
					<!-- 合同操作 END -->

            </view>
          </view>
          <block v-if="orderList.length == 0 && !loading">
            <emptyPage title="暂无订单信息～" :src="keyword ? '/statics/images/noSearch.gif' : '/statics/images/noOrder.gif'"></emptyPage>
          </block>
          <view class="loadingicon flex-center" v-if="orderList.length > 0">
            <text class="loading iconfont icon-ic_Refresh" v-if="loading"></text>
            <text class="fs-26 pb-32">{{ loadTitle }}</text>
          </view>
        </view>
        <!-- 确认框 -->
        <tuiModal
            :show="showModal"
            :title="modalTitle"
            :content="modalContent"
            :maskClosable="false"
            @click="handleClick"
            @cancel="hideModal"></tuiModal>
      <chatModal ref="chatModal"></chatModal>
    </view>
  </view>
</template>

<script>
import {getLeaseOrderList} from "@/api/leaseOrder";
import secondHandTag from "@/components/secondHandTag/index.vue";
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
import {
  getOrderList,
  orderData,
  orderCancel,
  orderDel,
  orderPay
} from '@/api/order.js';
import { openOrderSubscribe } from '@/utils/SubscribeMessage.js';
import home from '@/components/home';
import tuiModal from "@/components/tui-modal/index.vue"
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
import emptyPage from '@/components/emptyPage.vue';
import colors from '@/mixins/color.js';
import contract from "@/mixins/contract.js";
import Loading from '@/components/Loading/index.vue'
import {getUserInfo} from "@/api/user";
import {completeData} from "@/tools/user";
import leaseOrder from "@/pages/goods/js/leaseOrder";
import chatModal from '@/components/chatModal'
export default {
  components: {
    chatModal,
    Loading,
    home,
    emptyPage,
    tuiModal,
    secondHandTag
  },
  mixins: [colors, contract,leaseOrder],
  data() {
    return {
      showCompleteData: false,
      sysHeight:sysHeight,
      loaded: false,
      loading: false, //是否加载中
      loadend: false, //是否加载完毕
      loadTitle: '加载更多', //提示语
      orderList: [], //订单数组
      orderData: {}, //订单详细统计
      orderStatus: '', //订单状态
      orderType: '', //订单类型
      page: 1,
      limit: 20,
      pay_close: false,
      pay_order_id: '',
      totalPrice: '0',
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      keyword: '',
      marTop:0,
      focus:false,
      // 搜索历史
      historyList: [],
      // 临时搜索列表
      tempStorage: [],
      //确认模态框
      showModal:false,
      modalTitle:'',
      modalContent:'',
      modalType:0,
      orderId:'',
      userInfo:{},
      nowItem:{}
    };
  },
  computed: {
    ...mapGetters(['isLogin']),
    fixedTop() {
      // #ifdef MP || APP-PLUS
      return this.sysHeight + 'px'
      // #endif
      return this.data
      // #ifndef MP
      return 0
      // #endif
    }
  },
  onShow() {
    uni.removeStorageSync('form_type_cart');
    this.page = 1;
    this.loadend = false;
    this.orderList = [];
    if (this.isLogin) {
      this.getFun();
    } else {
      toLogin()
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    uni.removeStorageSync('form_type_cart');
    this.page = 1;
    this.loadend = false;
    this.orderList = [];
    if (this.isLogin) {
      this.getFun();
    } else {
      toLogin()
    }
  },
  onPageScroll(object) {
    uni.$emit('scroll');
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if (options.status) this.orderStatus = (options.status == undefined && options.status != 0) ? '' : parseInt(
        options.status);
    if (options.type) this.orderType = (options.type == undefined && options.type != 0) ? '' : parseInt(
        options.type);
    this.getMarTop();
    this.getUserInfo()
  },
  methods: {
    depositPay(item) {
      this.nowItem=item
      this.depositLeasePay(item.id)
    },
    depositPaySuccess(){
      this.nowItem.deposit_record.status=1
    },
    completeData,
    /**
     * 获取个人用户信息
     */
    getUserInfo() {
      let that = this;
      getUserInfo().then(async(res) => {
        that.userInfo = res.data;
        this.showCompleteData=await completeData(res.data)
      });
    },
    toChat() {
      this.$refs.chatModal.open()
      return;

      let userInfo = {}
      if(typeof this.userInfo === 'string'){
        userInfo = JSON.parse(this.userInfo)
      }else{
        userInfo = this.userInfo
      }
      let url = `/pages/extension/customer_list/chat?productId=${this.id}`
      this.$util.getCustomer(userInfo,url)
    },
    delHistory(){
      this.tempStorage = []
      this.historyList = []
      uni.setStorageSync('orderHistoryList', this.tempStorage);
    },
    getFun() {
      this.getOrderData();
      this.getOrderList();
    },
    onLoadFun() {
      this.getFun();
      this.isShowAuth = false;
    },
    getMarTop(){
      let that = this;
      setTimeout(() => {
        // 获取小程序头部高度
        let info = uni.createSelectorQuery().in(this).select(".header_box");
        info.boundingClientRect(function(data) {
          that.marTop = data?.height
        }).exec()
      }, 100)
    },
    /**
     * 获取订单统计数据
     *
     */
    getOrderData: function() {
      let that = this;
      orderData({type: this.orderType,search: this.keyword}).then(res => {
        that.$set(that, 'orderData', res.data);
      });
    },
    showModalChange(orderId, type){
      this.orderId = orderId;
      this.modalType = type;
      if(type == 1){
        this.modalTitle = '确认收货';
        this.modalContent = '为保障权益，请收到货确认无误后，再确认收货';
      }else if(type == 2){
        this.modalTitle = '删除订单';
        this.modalContent = '确定删除该订单?';
      }else if(type == 3){
        this.modalTitle = '温馨提示';
        this.modalContent = '确认取消该订单?';
      }
      this.showModal = true;
    },
    handleClick(e){
      let index = e.index;
      if(index == 1){
        if(this.modalType == 1){
          orderTake(this.orderId).then(res => {
            this.showModal = false;
            this.goSearch('');
            this.getOrderData();
          }).catch(err => {
            return this.$util.Tips({
              title: err
            });
          })
        }else if(this.modalType == 2){
          orderDel(this.orderId).then(res=>{
            this.showModal = false;
            this.goSearch('');
            this.getOrderData();
          })
        }else if(this.modalType == 3){
          this.showModal = false;
          orderCancel(this.orderId).then(()=>{
            this.goSearch('');
            this.getOrderData();
          })
        }
      }else{
        this.showModal = false;
      }

    },
    hideModal(){
      this.showModal = false;
    },
    /**
     * 取消订单
     *
     */
    cancelOrder: function(index, order_id) {
      let that = this;
      if (!order_id)
        return that.$util.Tips({
          title: '缺少订单号无法取消订单'
        });
      orderCancel(order_id)
          .then(res => {
            return that.$util.Tips({
                  title: res.msg,
                  icon: 'success'
                },
                function() {
                  that.orderList.splice(index, 1);
                  that.$set(that, 'orderList', that.orderList);
                  that.$set(that.orderData, 'unpaid_count', that.orderData.unpaid_count - 1);
                  that.getOrderData();
                }
            );
          })
          .catch(err => {
            return that.$util.Tips({
              title: err
            });
          });
    },
    goPay: function(order_id) {
      uni.reLaunch({
        url: `/pages/goods/cashier/index?order_id=${order_id}&from_type=order`
      })
    },
    goOrderDetails: function(item) {
      if (!item.order_id)
        return that.$util.Tips({
          title: '缺少订单号无法查看订单详情'
        });
      // #ifdef MP
      uni.showLoading({
        title: '正在加载'
      });
      openOrderSubscribe()
          .then(() => {
            uni.hideLoading();
            uni.navigateTo({
              url: `/pages/goods/lease_order_details/index?order_id=${item.order_id}`
            })
          })
          .catch(err => {
            uni.hideLoading();
          });
      // #endif
      // #ifndef MP
      uni.navigateTo({
        url: `/pages/goods/lease_order_details/index?order_id=${item.order_id}&id=${item.id}`
      });
      // #endif
    },
    /**
     * 切换类型
     */
    statusClick: function(status) {
      this.getOrderList();
      if (this.loading) return
      if (status === this.orderStatus) return;
      this.orderStatus = status;
      this.loadend = false;
      this.page = 1;
      this.$set(this, 'orderList', []);
      this.getOrderList();
    },
    searchFocus(){
      try {
        this.historyList = []
        this.tempStorage = []
        let arr = uni.getStorageSync('orderHistoryList')
        if (arr.length > 0) {
          this.historyList = Array.from(new Set(arr))
        } else {
          this.historyList = []
        }

        this.tempStorage = this.historyList
      } catch (e) {}
      this.focus = true;
    },
    goSearch(keyword){
      this.loadend = false;
      this.loading = false;
      this.keyword = keyword;
      this.page = 1;
      this.orderList = [];
      this.getOrderList();
    },
    inputConfirm(){
      this.loadend = false;
      this.loading = false;
      this.page = 1;
      this.orderList = [];
      this.getOrderData();
      this.getOrderList();
      setTimeout(e => {
        let arr = this.tempStorage;
        if(this.keyword !== ''){
          arr.unshift(this.keyword);
          this.tempStorage = [...Array.from(new Set(arr))];
          uni.setStorageSync('orderHistoryList', this.tempStorage);
        }
      }, 1000)
    },
    /**
     * 获取订单列表
     */
    getOrderList: function() {
      let that = this;
      if (that.loadend) return;
      if (that.loading) return;
      that.loading = true;
      that.loadTitle = '加载更多';
      getLeaseOrderList({
        status: that.orderStatus,
        page: that.page,
        limit: that.limit,
        search: this.keyword
      })
          .then(res => {
            uni.stopPullDownRefresh();
            let list = res.data || [];
            let loadend = list.length < that.limit;
            that.orderList = that.$util.SplitArray(list, that.orderList);
            that.$set(that, 'orderList', that.orderList);
            that.loadend = loadend;
            that.loading = false;
            that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
            that.page = that.page + 1;
            that.focus = false;
          })
          .catch(err => {
            that.loading = false;
            that.loadTitle = '加载更多';
          });
    },

    /**
     * 删除订单
     */
    delOrder: function(order_id, index) {
      let that = this;
      uni.showModal({
        title: '删除订单',
        content: '确定删除该订单',
        success: function(res) {
          if (res.confirm) {
            orderDel(order_id)
                .then(res => {
                  that.orderList.splice(index, 1);
                  that.$set(that, 'orderList', that.orderList);
                  that.$set(that.orderData, 'unpaid_count', that.orderData
                      .unpaid_count - 1);
                  that.getOrderData();
                  return that.$util.Tips({
                    title: '删除成功',
                    icon: 'success'
                  });
                })
                .catch(err => {
                  return that.$util.Tips({
                    title: err
                  });
                });
          } else if (res.cancel) {
            return that.$util.Tips({
              title: '已取消'
            });
          }
        }
      });

    },
    goPage(type, url){
      if(type == 1){
        uni.navigateTo({
          url
        })
      }else if(type == 2){
        uni.switchTab({
          url
        })
      }else if(type == 3){
        uni.navigateBack();
      }

    },
    // 分期账单
    goInstallment(item){
      uni.navigateTo({
        url: `/pages/goods/lease_installment/index?id=${item.id}&check_type=${item.order_lease.check_type}&order_id=${item.order_id}`
      })
    },
    goUserData(){
      uni.navigateTo({url:'/pages/users/user_add_data/index'})
    },
    // 买断商品
    goBuyout(item){
      uni.navigateTo({
        url:`/pages/goods/lease_order_buyout/index?order_id=${item.order_id}`
      })
    },
    // 续租
    goXuzu(item){
      uni.navigateTo({
        url:`/pages/goods/lease_order_xuzu/index?order_id=${item.order_id}`
      })
    },
    // 归还
    goReturn(item){
      uni.navigateTo({
        url:`/pages/goods/lease_order_return/index?order_id=${item.order_id}`
      })
    },
    // 归还记录
    returnRecord(item){
      uni.navigateTo({
        url:`/pages/goods/lease_order_return/record?order_id=${item.order_id}`
      })
    },
  },
  onReachBottom: function() {
    this.getOrderList();
  }
};
</script>

<style scoped lang="scss">
.border_con {
  border: 1px solid var(--view-theme);
}

.border_ccc {
  border: 1rpx solid #ccc;
}

.active {
  //color: var(--view-theme) !important;
  //font-weight: 500 !important;
  //font-size: 30rpx !important;
  position: relative;
  color: #000 !important;
  &::after {
    position: absolute;
    content: '';
    width: 36rpx;
    //height: 30rpx;
    border: 2rpx solid var(--view-theme);
    border-radius: 10rpx;
    //border-left: 2px solid transparent !important;
    //border-top: 2px solid transparent !important;
    //border-right: 2px solid transparent !important;
    //border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    bottom: -18rpx;
    //margin-left: -24rpx;
  }
}

.abs-rt {
  position: absolute;
  top: 0;
  right: 0;
}
.order_card ~ .order_card{
  margin-top:20rpx;

}
.btn ~ .btn{
  margin-left: 16rpx;
}
.uni-badge-left-margin {
  position: absolute;
  top: -16rpx;
  right: -30rpx;
  /deep/ .uni-badge--error {
    background-color: var(--view-theme) !important;
  }
  .uni-badge {
    color: var(--view-theme);
    border: 1px solid var(--view-theme);
    z-index: 29;
  }
}
.tab-box{
  display: flex;
  align-items: center;
  text{
    display: inline-block;
    min-width: 100rpx;
    white-space: nowrap;
    text-align: center;
    padding: 0 20rpx;
    color: #666666;
  }
}

.order_card{
  padding: 20rpx 30rpx;
  .card-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
    .l{
      font-size: 22rpx;
      color: #666;
    }
  }
  .order-tip,.data-tip{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx;
    background: #f5f5f5;
    border-radius: 6rpx;
    margin-top: 20rpx;
    font-size: 22rpx;
  }
  .data-tip{
    background-color: #fef9e5 !important;
    color: #d07942;
    margin-top: 20rpx;
    line-height: 1;
    .r{
      border: 1px solid #d07942;
      padding: 6rpx 15rpx;
      border-radius: 30rpx;
    }
  }
  .btn-box{
    border-top: 1px solid #f5f5f5;
    padding-top: 20rpx;
    overflow-x: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .chat{
      width: 56rpx;
    }
  }
}
</style>
